.tags_wrap {
  @apply absolute top-0 bottom-0 left-0 right-0 overflow-hidden;
  &_btn_show {
    @apply left-5 right-5;
  }
}
.wrap {
  @apply relative flex-grow overflow-hidden;
  z-index: 3;
  height: 50px;
  .left_btn,
  .right_btn {
    @apply absolute  h-full bg-white cursor-pointer;
    z-index: 4;
    bottom: 0px;
    width: 38px;
    text-align: center;
    padding-top: 20px;
    top: 5px;
  }
  .left_btn {
    left: 0px;
  }
  .right_btn {
    right: 0px;
  }
}

.tags_body {
  @apply pr-3 pt-2 absolute bottom-0 whitespace-nowrap;
  // width: calc(100% - 30px);
  padding-left: 60px;
  overflow-y: hidden;
  overflow-x: auto;
  .tag_item {
    @apply rounded cursor-pointer whitespace-nowrap;
    @apply relative;
    @apply transition-all;
    display: inline-block;
    margin-left: -20px;
    height: 30px;
    line-height: 30px;

    .tag_icons {
      @apply absolute;
      top: 3px;
      right: 20px;
    }
    .tag_title {
      position: relative;
      z-index: 3;
      padding-left: 25px;
      padding-right: 55px;
    }
    .tag_icon {
      @apply ml-0.5 cursor-pointer;
      z-index: 2;
    }
    .tag_bg {
      @apply absolute left-0 top-0 bottom-0 right-0;
      z-index: 1;
    }
    &_active {
      &::after {
        @apply absolute right-1 top-1.5;
        content: '';
        width: 1px;
        height: 10px;
      }
    }
  }
}

.dark_theme {
  .tag_item {
    @apply bg-black;
  }
}
.light_theme {
  .tag_item {
    @apply bg-white;
  }
}
